
<template>
  <view class="container">
    <view style="padding-top: 100px;">
     
      <view class="text-area">
        <text>输入值：</text>
        <input type="text" v-model="title" style="color: red;" />
      </view>
      
      <view class="text-area">
        <text>回传值：</text>
        <input type="text" :value="callBackValue" style="color: yellow;" readonly />
      </view>
    </view>
    
   
    <comA :intent="title" @sendToCompB="handleCompAData"></comA>
    
    <comB :compAValue="compAReceivedValue" @callBackFun="callBack"></comB>
  </view>
</template>

<script>
import comA from '@/components/compA.vue'
import comB from '@/components/compB.vue'

export default {
  components: {
    comA,
    comB
  },
  data() {
    return {
      title: 'Hello world',
      callBackValue: 'zyq123456', 
      compAReceivedValue: ''      
    }
  },
  methods: {
   
    handleCompAData(data) {
      this.compAReceivedValue = data
      console.log('接收到compA的数据：', data)
    },
   
    callBack(msg) {
      console.warn("---index---callBack--->" + msg)
      this.callBackValue = msg 
    }
  }
}
</script>

<style>

.container {
  padding: 20rpx;
}
.text-area {
  margin: 20rpx 0;
  display: flex;
  align-items: center;
}
.text-area text {
  margin-right: 20rpx;
}
input {
  border: 1px solid #ccc;
  padding: 10rpx;
  border-radius: 5rpx;
}
</style>